/* eslint-disable prettier/prettier */
<template>
  <div class="home">
    <div class="banner">
      <div class="bgc" :style="{ backgroundImage: `url(${imgUrl})` }"></div>
      <div class="content flex flex_column flex_center">
        <h1 class="title fontsize_64">{{ title }}</h1>
        <h2 class="sub-title pl_32 pr_32 fontsize_32 line_clamp_3">
          {{ subTitle }}
        </h2>
        <div>
          <NewTime />
        </div>
      </div>
    </div>
    <div class="body-box flex flex_column align_center">
      <ShadowBox width="80%" height="100%" borderWidth="4px" plain>
        <div class="p_20" style="background: #fff">
          <markdown
            :fileName="fileName"
            class="markdown-body"
            style="background-color: #ffffff"
          />
          <div class="flex flex_row flex_center" style="color: #333">
            <div class="flex_1">
              <span class="iconfont ml_10 mr_10 fontsize_20 icon-geren"></span>
              <span class="fontsize_20">{{ author }}</span>
              <span
                class="iconfont ml_10 mr_10 fontsize_20 icon-shijian"
              ></span>
              <span class="fontsize_20">{{ publishTime }}</span>
            </div>
            <div class="flex_1">
              <span
                class="iconfont ml_10 mr_10 fontsize_20 icon-pinglun"
              ></span>
              <span class="fontsize_20">{{ comments }}</span>
              <span class="iconfont ml_10 mr_10 fontsize_24 icon-yizan"></span>
              <span class="fontsize_20">{{ praise }}</span>
            </div>
          </div>
        </div>
      </ShadowBox>
    </div>
    <Footer />
  </div>
</template>

<script>
import ShadowBox from "@/components/shadowBox.vue";
import Footer from "../layout/components/footer.vue";
import markdown from "@/components/markdown.vue";
import NewTime from "@/components/newTime.vue";
export default {
  name: "About",
  components: {
    Footer,
    markdown,
    ShadowBox,
    NewTime,
  },
  data() {
    return {
      title: "文章详情",
      subTitle: "文章副标题",
      fileName: "TmpMd",
      author: "作者",
      publishTime: "发布时间",
      comments: "评论数",
      praise: "点赞数",
      imgUrl: require("../assets/images/guide.jpg"),
    };
  },
  created() {
    let detail = window.localStorage.getItem("detail");
    if (detail) {
      detail = JSON.parse(detail);
      this.fileName = detail.fileName || "TmpMd";
      this.title = detail.title || "文章详情";
      this.subTitle = detail.subTitle || "文章副标题";
      this.author = detail.author || "作者";
      this.publishTime = detail.time || "发布时间";
      this.comments = detail.comments || "评论数";
      this.praise = detail.praise || "点赞数";
      this.imgUrl = detail.img || require("../assets/images/guide.jpg");
    }
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  .banner {
    $banner-height: 80vh;
    width: 100%;
    height: $banner-height;
    position: relative;
    .bgc {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $banner-height;
      background-color: #f8f8f8;
      background-image: url(../assets/images/guide.jpg);
      background-size: cover;
      // background-size: 100%;
      // background-repeat: no-repeat;
      // background-position: center;
    }
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $banner-height;
      background-color: rgba(0, 0, 0, 0.2);
      .title {
        color: #fff;
        margin-bottom: 1rem;
      }
      .sub-title {
        color: #fff;
      }
    }
  }
  .body-box {
    position: relative;
    z-index: 10;
    margin-top: -100px;
    padding: 20px;
  }
}
</style>
